<link rel="stylesheet" href="../../compute/static/codemirror/codemirror.css">
<link rel="stylesheet" href="../../compute/static/codemirror/theme/ayu-dark.css">
<link rel="stylesheet" href="../../compute/static/codemirror/theme/seti.css'">
<script src="../../compute/static/codemirror/codemirror.js"></script>
<script src="../../compute/static/codemirror/mode/yaml/yaml.js"></script>
<script src="../../compute/static/codemirror/mode/javascript/javascript.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.4/FileSaver.js"></script>
<link rel="stylesheet" href="../../compute/static/layui-v2.6.8/layui/css/layui.css">
<script src="../../compute/static/layui-v2.6.8/layui/layui.js"></script>
<script src="../../compute/static/jquery-3.3.1.min.js"></script>
<article class="post">
    <header>
        <div style="color: #fff; padding: 80px 100px 0px 100px; font-size: 20px">
            <h1>create service with yaml</h1>
            <textarea id="code" name="code">{{ posts }}</textarea>
            <form>
                service name: <input type="text" id="name"/>
                <input id="upfile" name="upfile" type="file"/>
                <button type="button" onclick="dosubmit()" id="submit">submit</button>
            </form>
        </div>
    </header>
</article>
<script type="text/javascript">
    function dosubmit() {
        var name = document.getElementById("name").value
        var content = editor.getValue();
        content = content.replaceAll("\n", "huanhang");
        window.location.href = "/compute/new/getyaml?name=" + name + "&data=" + content
        // var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
        // saveAs(blob, ",save.yaml");
        // window.alert(content)
    }
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
            mode: "text/yaml",
            theme: "ayu-dark",
            lineNumbers: true,
            // tabSize: 1,
            readOnly: false,
            lineWrapping: true,
            // gutters: ["CodeMirror-lint-markers"],
        });
        editor.setSize("100%", "80%");

    $('#upfile').change(function() {
        var file = document.getElementById('upfile').files[0];
        // var filename = file.name.split(".")[0]
        // alert("name" + filename)
        // document.getElementById("name").value = filename;
        var reader = new FileReader();
        reader.readAsText(file,'utf-8');
        reader.onload = function () {
            editor.getDoc().setValue(reader.result);
        }
    })

</script>



